<template>
  <el-dialog
    append-to-body
    :visible.sync="value"
    :before-close="cancel">
    <template slot="title">
      修改独立域名
    </template>
    <el-form :model="form" ref="refForm" :label-width="formLabelWidth">
      <el-form-item
        label="代理账号"
        prop="account">
        <el-col :span="12">
          <el-input v-model="form.username" disabled @keyup.enter.native="doSave({action: 'saveForm', form: 'refForm'})"></el-input>
        </el-col>
        <el-col :span="2">&nbsp;</el-col>
        <el-col :span="2">
         <el-button @click="addDomain">新增域名</el-button>
        </el-col>
      </el-form-item>
      <el-form-item label="代理独立域名">
        <el-row
          :key="index"
          v-for="(domain, index) in form.domains"
          style="margin-bottom: 10px;">
          <el-col :span="12">
            <el-form-item
              :prop="'domains.' + index + '.value'"
              :rules="[
                {required: true, message: '代理独立域名不能为空', trigger: 'blur'},
                {pattern:'^(?=^.{3,255}$)www\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})$',message:'请输入正确的代理域名', trigger: ['blur', 'change']}
              ]"
            >
              <el-input v-model="domain.value" placeholder="独立域名" @keyup.enter.native="doSave({action: 'saveForm', form: 'refForm'})">
                <template slot="prepend">https://</template>
              </el-input>

            </el-form-item>
          </el-col>
          <el-col :span="2">&nbsp;</el-col>
          <!--<el-col :span="10" style="text-align: center;">-->
          <!--<el-form-item-->
          <!--:rules="[{ required: true, message: '有效期不能为空', trigger: 'blur' }]"-->
          <!--:prop="'domains.' + index + '.validTime'">-->
          <!--<el-date-picker-->
          <!--v-model="domain.validTime"-->
          <!--type="datetime"-->
          <!--placeholder="有效期"-->
          <!--value-format="timestamp"-->
          <!--format="yyyy-MM-dd HH:mm:ss">-->
          <!--</el-date-picker>-->
          <!--</el-form-item>-->
          <!--</el-col>-->

          <el-col :span="2">

            <el-button @click.prevent="removeDomain(domain)" >删除</el-button>
          </el-col>
        </el-row>
        <el-tip>请填写完整域名，如（www.baidu.com；若填写 baidu.com则无法保存）</el-tip>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="doSave({action: 'saveForm', form: 'refForm'})">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>

  import {form} from '@/build'
  import {getAgencyDomainDetail, editAgencyDomain} from '@/services/api/agency';
  import ElTip from "@/components/Tip/index";

  export default {
    name: "agency-domain-dialog",
    components: {ElTip},
    props: ['value', 'id', 'rowData'],
    mixins: [form],
    data() {
      const {domain1, domain2, domain3} = this.rowData;
      let domains = [{value: ''}];
      if (!_.isUndefined(domain1) && !_.isEmpty(domain1)) {
        domains.length = 0;
        domains.push({value: domain1})
      }
      if (!_.isUndefined(domain2) && !_.isEmpty(domain2)) {
        domains.push({value: domain2})
      }
      if (!_.isUndefined(domain3) && !_.isEmpty(domain3)) {
        domains.push({value: domain3})
      }
      return {
        formLabelWidth: '120px',
        edit: false,
        form: {
          userId: this.rowData.userId,
          username: this.rowData.username,
          domains: domains,
        },
      }
    },

    mounted() {
      this.bindSave(editAgencyDomain, 'saveForm', 'form', {
        beforeSend: (data) => {
          const {domains} = data;
          const domain1 = domains[0] && domains[0].value || undefined;
          const domain2 = domains[1] && domains[1].value || undefined;
          const domain3 = domains[2] && domains[2].value || undefined;
          return {...data, domain1, domain2, domain3}
        },
        afterSuccess: () => {
          this.cancel()
          this.$parent.getAll()
        }
      });

    },
    methods: {
      cancel() {
        this.$emit('input', false);
      },
      removeDomain(item) {
        var index = this.form.domains.indexOf(item)
        if (index !== -1) {
          this.form.domains.splice(index, 1)
        }
      },
      addDomain() {
        if (this.form.domains.length > 2) {
          this.$notify({
            type: 'warning',
            message: '最多添加三个独立域名'
          })
          return
        }
        this.form.domains.push({
          value: '',
          key: Date.now(),
        });
      },
    },

  }
</script>

<style lang="scss" scoped>

</style>
